/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 常用工具/客服查询
 *  */
import React, { useMemo, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
import styles from './index.less';
import InnStorageRecord from './components/InnStorageRecord';
import InnAccountInfo from './components/InnAccountInfo';
import SmsSendSearch from './components/SmsSendSearch';
import CloudSmsSearch from './components/CloudSmsSearch';
import RealnameBill from './components/RealnameBill';
import ChargeSustain from './components/ChargeSustain';
import VerCodeSearch from './components/VerCodeSearch';
import DeliverySearch from './components/DeliverySearch';
import ReclaimSearch from './components/ReclaimSearch';
import WaybillFromNo from './components/WaybillFromNo';
import SyncZtCounterman from './components/SyncZtCounterman';
import SmsSensitiveWord from './components/SmsSensitiveWord';
import MobileSearch from './components/MobileSearch';
import AccountOperationQuery from './components/AccountOperationQuery';
import { connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import type { CustomerSearchIndex } from './types/CustomerSearch';

const CustomerSearch = (props: CustomerSearchIndex) => {
  const { winSize } = props;
  const [activeKey, setActiveKey] = useState('InnAccountInfo');
  const handleTabChange = (key: string) => setActiveKey(key);

  const screenSize = useMemo(() => ['xs', 'sm'].includes(winSize), [winSize]);

  const tabList = [
    {
      tab: '驿站出入库记录',
      key: 'InnStorageRecord',
      child: <InnStorageRecord screenSize={screenSize} />,
    },
    {
      tab: '驿站账号信息',
      key: 'InnAccountInfo',
      child: <InnAccountInfo screenSize={screenSize} />,
    },
    {
      tab: '短信发送查询',
      key: 'SmsSendSearch',
      child: <SmsSendSearch screenSize={screenSize} />,
    },
    {
      tab: '云呼查询',
      key: 'CloudSmsSearch',
      child: <CloudSmsSearch screenSize={screenSize} />,
    },
    {
      tab: '实名寄递查询',
      key: 'RealnameBill',
      child: <RealnameBill screenSize={screenSize} />,
    },
    {
      tab: '充值/提现查询',
      key: 'ChargeSustain',
      child: <ChargeSustain screenSize={screenSize} />,
    },
    {
      tab: '短信验证码查询',
      key: 'VerCodeSearch',
      child: <VerCodeSearch screenSize={screenSize} />,
    },
    {
      tab: '查手机号绑定把枪',
      key: 'DeliverySearch',
      child: <DeliverySearch screenSize={screenSize} />,
    },
    {
      tab: '单号回收查询',
      key: 'ReclaimSearch',
      child: <ReclaimSearch screenSize={screenSize} />,
    },
    {
      tab: '单号查工号',
      key: 'WaybillFromNo',
      child: <WaybillFromNo screenSize={screenSize} />,
    },
    {
      tab: '中通工号同步',
      key: 'SyncZtCounterman',
      child: <SyncZtCounterman screenSize={screenSize} />,
    },
    {
      tab: '敏感字检测',
      key: 'SmsSensitiveWord',
      child: <SmsSensitiveWord />,
    },
    {
      tab: '脱敏手机号渠道查询',
      key: 'MobileSearch',
      child: <MobileSearch screenSize={screenSize} />,
    },
    {
      tab: '账号操作查询',
      key: 'AccountOperationQuery',
      child: <AccountOperationQuery screenSize={screenSize} />,
    },
  ];

  return (
    <PageContainer className={styles.main}>
      <Tabs onChange={handleTabChange} type='card' activeKey={activeKey}>
        {tabList.map(({ child, ...rest }) => (
          <TabPane key={rest.key} tab={rest.tab} forceRender>
            {child}
          </TabPane>
        ))}
      </Tabs>
    </PageContainer>
  );
};

export default connect(({ global }: ConnectState) => ({
  winSize: global.winSize || '',
}))(React.memo(CustomerSearch));
